<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Computational properties</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    <p>原信息: "{{ message }}"</p>
    <p>计算后的信息: "{{ reversedMessage }}"</p>
</div>

<div id="demo">{{ fullName }}</div>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                return this.message.split('').join(',');
            }
        }
    });

/*  watch 与 计算属性  */
//    var demo = new Vue({
//        el: '#demo',
//        data: {
//            firstName: 'Foo',
//            lastName: 'Bar',
//            fullName: 'Foo Bar'
//        },
//        watch: {
//            firstName: function (val) {
//                this.fullName = val + ' ' + this.lastName
//            },
//            lastName: function (val) {
//                this.fullName = this.firstName + ' ' + val
//            }
//        }
//    });

    var demo = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName: {
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })
</script>
</body>
</html>